<template>
  <div class="login" style="text-align:center;">
    <span>
      欢迎登陆
    </span>
    <div >
      <el-input placeholder="请输入用户名" v-model="name" clearable class="input_style" style="text-align:center;vertical-align: middle;width:400px;"></el-input>
      <span v-if="error.name" class="err-msg">{{error.name}}</span>
    </div>
    <div>
      <el-input placeholder="请输入密码" v-model="pwd" show-password class="input_style" style="text-align:center;vertical-align: middle;width:400px;"></el-input>
      <span v-if="error.pwd" class="err-msg">{{error.pwd}}</span>
    </div>
    <div>
      <el-button type="primary" @click="login" class="login_style" style="text-align:center;">登录</el-button>
    </div>
  </div>
</template>

<script>

  import loginRequest from "../utils/loginRequest";

  export default {
    name: "Login",
    data(){
      return {
        name: '',
        pwd : '',
        error : {
          name: '',
          pwd : ''
        }
      }
    },
    methods:{
      login(){
        loginRequest.post("/login", {username: this.name, password: this.pwd}).then(res=>{
          // console.log('res=>',res)
          if (res.success){
            //保存用户信息在vuex
            this.$store.commit('updateCurrentUser',res.result)
            // 保存数据在浏览器
            window.sessionStorage.setItem("user",JSON.stringify(res.result));
            this.$router.push('/layout')
            this.$message.success(res.message);

            // 读取数据：
            // var getData=localStorage.getItem("key");
            // 删除数据：
            // localStorage.removeItem("key");

          } else {
            this.$message.error(res.message);
          }

        })

      }
    }
  }
</script>

<style>
  .login{
    margin-top: 200px;
  }
  .input_style{
    width: 200px;
    margin-bottom: 10px;
  }
  .login_style{
    width: 200px;
  }
</style>

